<template>
  <div class="app">
    <!-- template中的ref对象会自动解包， 不需要调用value -->
    <h2>当前计数： {{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
import useCounter from './hooks/useCounter'

export default {
  /*
		setup 函数在组件实例化之前执行，因此在 setup 中无法直接访问到组件实例的 this。
		setup 函数中返回的数据和方法都会被注入到组件实例中，可以在模板和组件内部的其他函数中使用。
		setup 函数还可以接收两个参数，分别是 props 和 context。通过 props 可以访问组件传入的 prop 值，通过 context 可以访问到组件的 attrs、slots、emit 等属性。
	*/
  setup() {
    /* const { counter, increment, decrement } = useCounter()

		return {
			counter,
			increment,
			decrement,
		} */

    // 在这里设置组件的初始状态和响应式数据
    // 返回组件需要暴露的数据和方法
    return {
      ...useCounter(),
    }
  },
}
</script>

<style></style>
